<template>
	<view class="content">
		<view class="top_swiper">
			<!-- 返回 -->
			<swiper class="swiper_index" :indicator-dots="false" @change="change">
				<swiper-item v-for="(item,index) in banner">
					<view class="swiper-item">
						<image class="swiper_pic" :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 图片数量 -->
			<view class="currNum">{{currIndex}}/{{banner.length}}</view>
		</view>
		<view class="auctionPrice">
			<view class="sign iconfont">&#xe604;</view>
			<view class="price">{{auctionDatas.price}}</view>
		</view>
		<view class="goods_name">{{yxAuctionProductDto.title}}</view>
		<view class="goods_introl">{{yxAuctionProductDto.productInfo}}</view>
		<view class="goods_detail">商品详情</view>
		<view class="detail_cont">
			<view class="detail_cont_list">
				<rich-text :nodes="productDetail"></rich-text>
			</view>
			<view class="salesInfo" v-if="auctionDatas.nickname != null">
				<view class="infoList">卖方姓名：{{auctionDatas.nickname}}</view>
				<view class="infoList" @click="goSalephone(auctionDatas.phone)">卖方电话：{{auctionDatas.phone}}</view>
			</view>
			<view class="salesInfo" v-if="yxAuctionOrder.status == 3">
				<view class="infoList">快递公司：{{yxAuctionOrder.express}}</view>
				<view class="infoList" >快递单号：{{yxAuctionOrder.expressNumber}} 
					<text class="infotxt" @click="copyExpress(yxAuctionOrder.expressNumber)">复制</text>
				</view>
			</view>
		</view>
		
		<view class="fixed" v-if="yxAuctionOrder.status == 2">
			<view class="fixedcont"  >
				<view class="ficedfl" @click="popup">
					<image class="iconservice" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/service.png" mode=""></image>
					<view class="servicetxt">客服</view>
				</view>
				<view :class="['fixed_user',{fixed_curr:yxAuctionOrder.isMax == 1}]" >
					<view class="takegoods" @click="goTakeGoods(yxAuctionOrder)">立即提货</view>
					<view class="sponsor" v-if="yxAuctionOrder.isMax == 0" @click="getSponsor(yxAuctionOrder)">发起转拍</view>
				</view>
			</view>
		</view>
		<!-- <view v-else-if="yxAuctionOrder.status == 4" class="fixedfr fixedfrColor">您已确认收货，交易已完成</view> -->
		<view v-else class="fixedfr" @click="getOperate(yxAuctionOrder.status,yxAuctionOrder.id)">{{yxAuctionOrder.status | filterResult}}</view>
		
		<!-- 拨打客服电话 -->
		<!-- <view class="tuiPop" v-show="popupShow == true" @click="close"></view>
		<view class="tuipopcont" v-show="popupShow == true">
			<view class="getPhone" @click="goPhone(phone)"><text style="color: #333333;">拨打电话：</text>{{phone}}</view>
			<view class="cancel" @click="close">取消</view>
		</view> -->
		<!-- 客服电话 -->
		<uni-popup ref="popup1" type="center" :maskClick="false">
			<view class="customer">
				<view class="title">客服微信</view>
				<view class="phone">联系电话：{{phone}}</view>
				<view class="tuiimg">
					<image class="tuipic" :src="datasImg" mode=""></image>
					<view class="tuipic_txt">客服微信</view>
				</view>
				<view class="sure" @click="cancel">知道了</view>
			</view>
		</uni-popup>
		<!-- 转拍协议 -->
		<view class="" @touchmove.stop.prevent="moveHandle">
			<uni-popup ref="popup2" type="center" :maskClick="false">
				<view class="uni-center">
					<view class="title">用户拍卖说明</view>
					<view class="con_title">尊敬的优集聚云拍用户：</view>
					<view class="content">
						<view class="t_con">
							感谢您选择优集聚云拍, 我们非常重视您的个人信息。为了更好的保护您的个人权益，在您操作之前请仔细阅读
							《<text @click.stop="protocol(5)">拍卖协议</text>》所有条款。主要内容如下：
						</view>
						<view class="con_first">1.明确了拍卖的各项条款</view>
						<view class="con_first">2.说明各项条款的明细</view>
						<view class="btn_con">
							<view class="reject_btn" @click="checked(1,auctionDatas)">不同意</view>
							<view class="aggrement_btn" @click="checked(2,auctionDatas)">同意</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		
		
	</view>
</template>

<script>
	import uniPopup from "../../../../../components/uni-popup/uni-popup.vue"
	export default {
		components: {uniPopup},
		data() {
			return {
				popupShow:false,
				id:'',
				auctionDatas:{},
				banner:[],
				currIndex:1,
				yxAuctionProductDto:{},
				phone:'',
				yxAuctionOrder:{},
				productDetail:'',
				userInfo:{},
				datasImg:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.getDetailInfo()
			let that = this;
			uni.$on('goTake',function(data){
			    console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				that.getDetailInfo()
			})
			uni.$on('login',function(data){
				that.cacheHelper.isLogin()
				that.cacheHelper.updateUserInfo()
				that.getUserInfo()
			})
			that.getUserInfo();
		},
		filters:{
			filterResult: function (e) {
				if (e == 0) {
					return '待付款'
				} else if (e == 1) {
					// return '您已付款，等待卖家确认收款'
					return '待被买'
				} else if (e == -3){
					return '等待卖家发货'
				} else if (e == 3){
					return '确认收货'
				} 
			}
		},
		methods: {
			// 轮播改变
			change: function (e) {
				// console.log(e)
				this.currIndex = e.detail.current + 1
			},
			// 返回
			back: function () {
				uni.navigateBack({
					delta: 1
				});
			},
			moveHandle: function () {
				return
			},
			// 抢拍操作
			getOperate: function (status,id) {
				let that = this;
				let price = that.yxAuctionOrder.price;  
				let sid = that.auctionDatas.id; //抢拍id
				let times = that.auctionDatas.times;
				if (status == 0) {   // 待付款
					uni.navigateTo({
						url: '../../../home/auctionPayment/auctionPayment?money=' + price + '&id=' + sid + '&buyId=' + id + '&times=' + times,
					});
					setTimeout(function () {
						uni.$emit('goTake',{msg:'页面更新'});
						uni.$emit('update',{msg:'页面更新'})
						uni.$emit('billOrder',{msg:'页面更新'})
					},500)
					
				} else if (status == 1) {  // 您已付款，等待卖家确认收款
					that.tui.toast('您已付款，等待卖家确认收款');
					return
				} else if (status == 3) {
					that.api.userGetConfirm(id).then(res => {
						console.log(res)
						that.tui.toast(res.data);
						setTimeout(function () {
							uni.$emit('goTake',{msg:'页面更新'});
							uni.$emit('update',{msg:'页面更新'})
							uni.$emit('billOrder',{msg:'页面更新'})
						},500)
					})
				} 
				
			},
			// 点击获取客服电话
			popup: function() {
				this.getPhone()
				this.$refs.popup1.open();
				// this.popupShow = !this.popupShow
			},
			cancel: function () {
				this.$refs.popup1.close();
				// this.popupShow = !this.popupShow
			},
			// 发起转拍
			getSponsor: function (yxAuctionOrder) {
				this.$refs.popup2.open();
				// let userInfo = this.userInfo;
				// if ( userInfo.bindWx != 0 && userInfo.bindZfb != 0) {
				// 	uni.navigateTo({
				// 		// url: '../../../home/sponsorPay/sponsorPay?serviceMoney=' + yxAuctionOrder.serviceMoney + '&id=' + yxAuctionOrder.id,
				// 		url:`../../../home/sponsorPay/sponsorPay?serviceMoney=${yxAuctionOrder.serviceMone}&id=${yxAuctionOrder.id}`
				// 	});
				// } else {
				// 	this.tui.toast("没有绑定支付宝、微信")
				// 	setTimeout(function () {
				// 		uni.navigateTo({
				// 			url: '../../paymentSetting/paymentSetting',
				// 		});
				// 	},1500)
				// 	return
				// }
			},
			// 确认订单(立即收货)
			goTakeGoods: function (yxAuctionOrder) {
				uni.navigateTo({
					// url: '../../../home/sureAuctionOrder/sureAuctionOrder?id=' + yxAuctionOrder.id,
					url: `../../../home/sureAuctionOrder/sureAuctionOrder?id=${yxAuctionOrder.id}`
				});
			},
			// 获取详情
			getDetailInfo: function () {
				this.api.buyBillOrderDetail(this.id).then(res => {
					console.log(res)
					let datas = res.data;
					if (datas.yxAuctionProductDto.slideImg != '') {
						this.banner = datas.yxAuctionProductDto.slideImg.split(";")
					} else {
						this.banner = []
					}
					// let productDetail = datas.yxAuctionProductDto.productDetail.splice()
					this.yxAuctionProductDto = datas.yxAuctionProductDto;
					this.yxAuctionOrder = datas.yxAuctionOrder;
					let detail = datas.yxAuctionProductDto.productDetail.replace(/[ \t]*width[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					let details = detail.replace(/[ \t]*height[ \t]*=[ \t]*("[^"]+")|('[^']+')/ig,"");
					this.productDetail = details.replace(/<img /g, '<img width="100%" style="vertical-align: top;"');
					this.auctionDatas = datas;
					// console.log(this.yxAuctionProductDto.productDetail,"------")
				})
			},
			// 获取客服电话
			getPhone: function () {
				let code = 'kfdh'
				this.api.getServiceTel(code).then(res => {
					console.log(res)
					this.phone = res.data.memo
					this.datasImg = res.data.images;
				})
			},
			// 拨打电话
			goPhone: function (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			// 获取我的信息
			getUserInfo: function () {
				this.api.getUserInfo().then(res => {
					console.log(res)
					this.userInfo = res.data.yxUserinfo;
				})
			},
			goSalephone: function (phone) {
				uni.makePhoneCall({
				    phoneNumber: phone //仅为示例
				});
			},
			// 复制单号
			copyExpress: function (expressNumber) {
				uni.setClipboardData({
				    data: expressNumber,
				    success: function (res) {
						console.log(res,"---")
				        // console.log('success');
				    }
				});
			},
			
			/* 拍卖协议 */
			protocol: function (type) {
				uni.navigateTo({
					url: '../../../login/potocol/potocol?type=' + type,
				});
			},
			// 同意
			checked: function (value,auctionDatas) {
				if (value == 1) {
					this.$refs.popup2.close()
					return;
				} else if (value == 2) {
					this.$refs.popup2.close()
					let userInfo = this.userInfo;
					let yxAuctionOrder = auctionDatas.yxAuctionOrder
					if ( userInfo.bindWx != 0 && userInfo.bindZfb != 0) {
						uni.navigateTo({
							url:`../../../home/sponsorPay/sponsorPay?serviceMoney=${auctionDatas.serviceCharge}&id=${yxAuctionOrder.id}`
						});
					} else {
						this.tui.toast("没有绑定支付宝、微信")
						setTimeout(function () {
							uni.navigateTo({
								url: '../../paymentSetting/paymentSetting',
							});
						},1500)
						return
					}
					
				}
			} 
			
			
			
			
		} 
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		letter-spacing: 3rpx;
		font-size: 30rpx;
		color: #212121;
		background: #FFFFFF;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
	}
	.top_swiper {
		width: 100%;
		box-sizing: border-box;
		// height: 750rpx;
		position: relative;
		.swiper_index {
			width: 100%;
			box-sizing: border-box;
			height: 750rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				.swiper_pic {
					width: 100%;
					height: 100%;
				}
			}
		}
		.back {
			font-size: 70rpx;
			position: absolute;
			left: 20rpx;
			top: 60rpx;
			z-index: 15;
			color: rgba(0, 0, 0, 0.41);
		}
		.currNum {
			position: absolute;
			right: 20rpx;
			bottom: 80rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			width: 80rpx;
			line-height: 35rpx;
			text-align: center;
			background: rgba(0, 0, 0, 0.41);
			border-radius: 9rpx;
			z-index: 15;
		}
		.swiper_bot {
			width: 100%;
			box-sizing: border-box;
			line-height: 72rpx;
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 15;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 36rpx;
			.boticon {
				width: 28rpx;
				height: 28rpx;
			}
			.bottxt {
				width: calc(100% - 28rpx);
				box-sizing: border-box;
				padding-left: 20rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		
	}
	.auctionPrice {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 36rpx;
		line-height: 87rpx;
		color: #E42221;
		font-size: 62rpx;
		display: flex;
		justify-content: flex-start;
		.sign {
			font-size: 32rpx;
			color: #FFDA71;
			padding-top: 10rpx;
		}
		
	}
	.goods_name {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx 40rpx 36rpx;
		border-bottom: 2rpx solid #F3F6F6;
		font-weight: 500;
	}
	.goods_introl {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 36rpx;
		font-size: 26rpx;
		color: #212121;
	}
	
	.goods_detail {
		width: 100%;
		box-sizing: border-box;
		line-height: 64rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
		background: #F5F5F5;
	}
	.detail_cont {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 20rpx 150rpx 20rpx;
		.detail_cont_list {
			width: 100%;
			box-sizing: border-box;
		}
	}
	.fixed {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 16rpx 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		.fixedcont {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			.fixed_user {
				width: 552rpx;
				line-height: 82rpx;
				text-align: center;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				&.fixed_curr {
					justify-content: flex-end;
				}
				.sponsor {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #E42221;
					border-radius: 8rpx;
					color: #FFFFFF;
					background: #E42221;
				}
				.takegoods {
					width: 266rpx;
					box-sizing: border-box;
					line-height: 80rpx;
					border: 2rpx solid #C7973B;
					border-radius: 8rpx;
					color: #C7973B;
				}
			}
			.ficedfl {
				width: calc(100% - 552rpx);
				box-sizing: border-box;
				text-align: center;
				.iconservice {
					width: 46rpx;
					height: 46rpx;
					margin: 0 auto;
				}
				.servicetxt {
					font-size: 22rpx;
					color: #666666;
					line-height: 30rpx;
				}
				
			}
		}
		
	}
	.fixedfr {
		width: 100%;
		box-sizing: border-box;
		background: #E42221;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
		line-height: 112rpx;
		color: #FFFFFF;
		text-align: center;
		&.fixedfrColor {
			background: #FFFFFF;
			color: #212121;
		}
	}
	.tuiPop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 996;
		transition: all 0.3s ease-in-out;
	}
	.tuipopcont {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 998;
		// transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		padding: 30rpx;
		.cancel {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
		}
		.getPhone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			line-height: 100rpx;
			border-radius: 12rpx;
			color: #E42221;
			font-size: 30rpx;
			margin-bottom: 30rpx;
		}
	}
	.salesInfo {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		.infoList {
			width: 100%;
			box-sizing: border-box;
			line-height: 80rpx;
			font-size: 30rpx;
			.infotxt {
				color: #E42221;
				margin-left: 30rpx;
			}
		}
	}
	// 弹窗
	.customer {
		width: 580rpx;
		box-sizing: border-box;
		// background: url(../../..//popup.png) no-repeat;
		background-size: 100%;
		border-radius: 16rpx;
		text-align: center;
		background: #FFFFFF;
		padding: 20rpx;
	
		.title {
			width: 100%;
			box-sizing: border-box;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #212121;
		}
	
		.phone {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			font-size: 34rpx;
			color: #E42221;
			line-height: 50rpx;
		}
	
		.tuiimg {
			width: 100%;
			box-sizing: border-box;
			text-align: center;
			background: #FFFFFF;
			padding: 20rpx 0;
			margin-bottom: 30rpx;
			text-align: center;
			border-radius: 10rpx;
		
			.tuipic {
				width: 220rpx;
				height: 220rpx;
			}
		}
		.sure {
			width: 260rpx;
			line-height: 60rpx;
			background: linear-gradient(to right, #DE3143, #E42221);
			text-align: center;
			margin: 10rpx auto;
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	
		
	
	}
	
	.uni-center {
		width: 650rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		// text-align: center;
		
		.title{
			font-size: 31rpx;
			font-weight: bold;
			height: 68rpx;
			line-height: 68rpx;
		}
		.con_title{
			height: 68rpx;
			font-size: 29rpx;
			line-height: 68rpx;
		}
		.content{
			background-color: #FFFFFF;
			font-size: 26rpx;
			color: #333333;
			font-weight: 500;
			.t_con{
				line-height: 48rpx;
				font-size: 29rpx;
				text{
					color: #E42221;
				}
			}
			.con_first{
				line-height: 68rpx;
			}
			.btn_con{
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					width: 250rpx;
					text-align: center;
					font-size: 29rpx;
					letter-spacing: 5rpx;
					line-height: 80rpx;
					color: #FFFFFF;
					border-radius: 12rpx;
					margin-top: 80rpx;
				}
				.reject_btn{
					background-color: #999999;
				}
				.aggrement_btn{
					background-color: #E42221;
				}
			}
		}
		
	}
	
	

</style>
